import { Text3D, OrbitControls, Center } from '@react-three/drei'
import { useState } from 'react'
import { TorusGeometry } from 'three'

const Experence = () => {
  const [geometry, setGeometry] = useState<TorusGeometry>(null!)
  return (
    <>
      <OrbitControls />
      <Center>
        <Text3D font="/font.json">
          wanglei!
          <meshNormalMaterial />
        </Text3D>
      </Center>
      {[...Array(100)].map((_, index) => (
        <mesh
          geometry={geometry}
          key={index}
          position={[
            (Math.random() - 0.5) * 8,
            (Math.random() - 0.5) * 8,
            (Math.random() - 0.5) * 8,
          ]}
          scale={Math.random() * 0.2 + 0.2}
          rotation={[Math.random() * Math.PI, Math.random() * Math.PI, 0]}
        >
          <meshBasicMaterial color="mediumpurple" />
        </mesh>
      ))}
      <torusGeometry ref={setGeometry} args={[1, 0.6, 16, 32]} />
    </>
  )
}

export default Experence
